<template>
	<uni-notice-bar  style="text-align: center;" text="审批中可撤回重新登记" single color="#FF5F00" background-color="#FFEEDD" />

	<view>
	    <view class="beijing">
	        <view v-for="(item,index) in users" >
	            <view class="view">
	                <text class="title">留校原因</text>
	                <text style="color: red;">*</text><br>
	                <text class="txt">{{item.reason}}</text>
	            </view>
	            <view class="view">
	                <text class="title">计划留校开始时间</text>
	                <text style="color: red;">*</text><br>
	                <text class="txt">{{item.begintime}}</text>
	            </view>
	            <view class="view">
	                <text class="title" >计划留校结束时间</text>
	                <text style="color: red;">*</text><br>
	                <text class="txt">{{item.endtime}}</text>
	            </view>
	            <view class="view">
	                <text class="title">家庭联系人姓名</text>
	                <text style="color: red;">*</text><br>
	                <text class="txt">{{item.name}}</text>
	            </view>
	            <view class="view">
	                <text class="title">家庭联系人电话</text>
	                <text style="color: red;">*</text><br>
	                <text class="txt">{{item.tel}}</text>
	            </view>
	            <view class="view">
	                <text class="title">是否需要校内住宿*</text>
	                <text style="color: red;">*</text><br>
	                <text class="txt">{{item.opt}}</text>
	            </view>
	        </view>
	    </view>
  
    

  <view style="margin-left: 12px;">
  	<uni-collapse>
  		<uni-collapse-item  title="审批流程" >
  			<view>
  				<text>
  
  				<timeline>
  					<timelineItem leftTime='' color="#D4D4D4">
  						<view class="tripItem">
  							<uni-row>
  								<uni-col span="4">
  									<view class="ava" style="background-color: #FFD4D4;">
  										<text class="ava-txt" style="color: #FE7575;">张</text>
  									</view>
  								</uni-col>
  								<uni-col span="20">
  									<view class="title">发起人(学生)</view>
  									<view class="tips">张婉悠 <view style="color: #797979; margin-left: 100px;">已发起</view></view>
  
  								</uni-col>
  							</uni-row>
  						</view>
  					</timelineItem>
  					<timelineItem leftTime='' color="#90B8FF" innercolor='#006DFF'>
  
  						<view class="tripItem" style="height: 100px;">
  							<uni-row>
  								<uni-col span="4">
  									<view class="ava" style="background-color: #E2E6FF;">
  										<text class="ava-txt" style="color: #6A7CE3;">王</text>
  									</view>
  								</uni-col>
  								<uni-col span="20">
  									<view class="title">审批人(导师)</view>
  									<view class="tips">王小明 <view style="color: #CB000E; margin-left: 100px;">审批不通过</view></view>
  									<view style="margin-top: 15px; color: #797979;">备注：去年就没有回家，今年回家吧</view>
  								</uni-col>
  							</uni-row>
  						</view>
  					</timelineItem>
  					<timelineItem leftTime='' color="#D4D4D4">
  						<view class="tripItem">
  							<uni-row>
  								<uni-col span="4">
  									<view class="ava" style="background-color: #FFD4D4;">
  										<text class="ava-txt" style="color: #FE7575;">张</text>
  									</view>
  								</uni-col>
  								<uni-col span="20">
  									<view class="title">发起人(学生)</view>
  									<view class="tips">张婉悠 <view style="color: #797979; margin-left: 100px;">已发起</view></view>
  
  								</uni-col>
  							</uni-row>
  						</view>
  
  					</timelineItem>
  					<timelineItem leftTime='' color="#D4D4D4">
  
  						<view class="tripItem">
  							<uni-row>
  								<uni-col span="4">
  									<view class="ava" style="background-color: #E2E6FF;">
  										<text class="ava-txt" style="color: #6A7CE3;">王</text>
  									</view>
  								</uni-col>
  								<uni-col span="20">
  									<view class="title">审批人(导师)</view>
  									<view class="tips">王小明 <view style="color: #00832B; margin-left: 100px;">审批通过</view></view>
  								</uni-col>
  							</uni-row>
  						</view>
  					</timelineItem>
  					<timelineItem leftTime='' color="#D4D4D4">
  						<view class="tripItem">
  							<uni-row>
  								<uni-col span="4">
  									<view class="ava" style="background-color: #FFEAC2;">
  										<text class="ava-txt" style="color: #F8852C;">周</text>
  									</view>
  								</uni-col>
  								<uni-col span="20">
  									<view class="title">审批人(辅导员)</view>
  									<view class="tips">周一围 <view style="color: #00832B; margin-left: 100px;">审批通过</view></view>
  								</uni-col>
  							</uni-row>
  						</view>
  					</timelineItem>
  					<timelineItem leftTime='' color="#D4D4D4">
  						<view class="tripItem">
  							<uni-row>
  								<uni-col span="4">
  									<view class="ava" style="background-color: #E2E6FF;">
  										<text class="ava-txt" style="color: #6A7CE3;">王</text>
  									</view>
  								</uni-col>
  								<uni-col span="20">
  									<view class="title">审批人(副书记/副院长)</view>
  									<view class="tips">王小明 <view style="color: #00832B; margin-left: 100px;">审批通过</view></view>
  								</uni-col>
  							</uni-row>
  						</view>
  					</timelineItem>
      </timeline>
  				</text>
  			</view>
  		</uni-collapse-item>
  	</uni-collapse>
  </view>
  <view>
		<button class="bu"  @click="tolong()">
			<text class="zi">
				延长留校时间
			</text>
		</button>
	</view>

      
  </view>
</template>

<script setup>
	import UniNoticeBar from "../../uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue";
	import timeline from '../../components/chenbin-timeline/timeLine.vue'
	import timelineItem from '../../components/chenbin-timeline/timelineItem.vue'
	import { ref } from 'vue';
	// export default {
	//     name: "pass.vue",
	//     components: {UniNoticeBar}
	// }
	let users = ref([{
	    "reason" :"今年不回家",
	    "begintime" : "2024年1月2日 08:30:00",
	    "endtime":"2024年1月25日 08:30:00",
	    "name" :"张梅林",
	    "tel" : "15567899900",
	    "opt":"不需要"
	}])
	let tolong=function (){
		uni.navigateTo({
			url:'/pages/index/long'
		})
	}
</script>

<style scoped>
	.beijing{
	    width: 100%;
	    height: 356px;
	    background: #FFFFFF;
	    border-radius: 4px;
	    margin: 12px;
	    padding: 12px;
	}
	.txt{
	    width: 60px;
	    height: 17px;
	    font-family: PingFangSC-Regular;
	    font-weight: 400;
	    font-size: 12px;
	    color: #797979;
	
	}
	.view{
	    margin-bottom: 18px;
	}
	.title{
	    width: 180px;
	    height: 20px;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    font-size: 14px;
	    color: #171717;
	    text-align: left;
	}
	.tripItem {
	    height:80px;
	    padding: 20rpx 30rpx;
	    box-sizing: border-box;
	    background:rgba(255,255,255,1);
	    box-shadow:0px 0px 20px 0px rgba(0,0,0,0.08);
	    border-radius:10px;
	    margin-bottom: 0rpx;
	
	}
	.tripItem .title {
	    font-size: 14px;
	    font-family:PingFangSC-Medium,PingFang SC;
	    font-weight:500;
	    color:rgba(51,51,51,1);
	}
	.tripItem .tips {
	    /* font-size:22rpx;
	    font-family:PingFangSC-Regular,PingFang SC;
	    font-weight:400;
	    color:rgba(153,153,153,1);
	    margin-top: 20rpx; */
	    color: #000000e6;
	    font-size: 14px;
	    font-face: PingFangSC;
	    font-weight: 400;
	    line-height: 0;
	    letter-spacing: 0;
	    paragraph-spacing: 0;
	    text-align: left;
	    margin-top: 26px;
	}
	.ava{
	    width: 32px;
	    height: 32px;
	    border-radius: 50%;
	    text-align: center;
	
	}
	.ava-txt{
	    width: 16px;
	    height: 22px;
	    font-family: PingFangSC-Regular;
	    font-weight: 400;
	    font-size: 16px;
	
	    line-height: 32px;
	}
	.bu{
		display: block;
		text-align: center;
		line-height: 40px;
		width: 95%;
		height: 40px;
		background-image: linear-gradient(90deg, #6CA9FF 0%, #166AFF 100%);
		border-radius: 4px;
		margin-left: 12px;
	}
	.zi{
		width: 60px;
		height: 21px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 15px;
		color: #FFFFFF;
		line-height: 40px;
	}
</style>